<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>JSized Carousel Demo by http://sc.xueit.com</title>    
    
    <!-- Include a stylesheet -->
    <link type="text/css" rel="stylesheet" href="./jsized.carousel.css">    

    <!-- Include jQuery 1.3.2 only if you don't already have it on the page. -->
    <script src="./js/jquery-1.3.2.js" type="text/javascript"></script>
    
    <!-- Add other required files -->
    <script src="./js/merged-without-jquery.js" type="text/javascript"></script>
	
	<script>
		jQuery(function($){
            // this lines create a carousel when the page finishes loading
            $('.example1').jsizedCarousel({
                // disable slideshow
                changeInterval: 0
            });
            
	        $('.example2').jsizedCarousel({
                // size of the biggest slide
                front : {
                    width: 350,
                    height: 250
                },
                // determinies how much the slides decrease
                // from distance
                // default 0.15
                sizeDecrease : 0.2,
	            // distance between slides in px
                distanceBetween: 25,
                changeInterval: 5
            });            
		});
	</script>
    
    <style>
        /* 
        Styles for this demo only, you probably won't need them
        Look into jsized.carousel.css to customize gallery 
        */
        body {
            background: #2C2C2C;
        }
        .wr {
            width: 500px;
            margin: 0 auto;
            padding: 30px 100px;
            background: #fff;
            border: 1px solid background: #DBDAD9;            
        }
        h2 {
            margin: 30px;
            text-align: center;            
            font-size: 18px;
            font-weight: normal;
            font-family: Verdana;
        }
    </style>
</head>
<body>
<div class="wr">
  <h2>Carousel demo 1</h2> 
	<div class="jsizedCarousel example1">
        <img src="images/image1.jpg" alt="Title for an image" />
        <img src="images/image2.jpg" alt="Title for an image" />            
        <img src="images/image3.jpg" alt="Title for an image" />
        <img src="images/image4.jpg" alt="Title for an image" />
        <img src="images/image5.jpg" alt="Title for an image" />            
        <img src="images/image1.jpg" alt="Title for an image" />
        <img src="images/image7.jpg" alt="Title for an image" />
        <img src="images/image8.jpg" alt="Title for an image" />            
        <img src="images/image6.jpg" alt="Title for an image" />              
	</div>
    <p>Slideshow is disabled.</p>
    <pre>
$('.example1').jsizedCarousel({
    // disable slideshow
    changeInterval: 0
});
    </pre>
  <h2>Carousel demo 2</h2>     
	<div class="jsizedCarousel example2">
        <img src="images/image1.jpg" alt="Title for an image" />
        <img src="images/image2.jpg" alt="Title for an image" />            
        <img src="images/image3.jpg" alt="Title for an image" />
	</div>
    <p>Image size and delay customized.</p>
    <pre>
$('.example2').jsizedCarousel({
    // size of the biggest slide
    front : {
        width: 350,
        height: 250
    },
    // delay between slide changes
    changeInterval: 5,
    // distance between slides in px
    distanceBetween: 25,    
    // determinies how much the slides sizes decrease
    sizeDecrease : 0.2    
}); 
    </pre>
</div>
</body>
</html>